<template>
	
	  <!-- <el-checkbox-group v-model="checkList"> -->
	      
	   
	  
		<div v-for=" (item , index) in tableDataCopy">
			
		    <el-checkbox  v-model="item[0].x" @change="addEmpId(item[0].empId,item[0].x)" :disabled="scoreFlag">被考核人：{{item[0].empName}}</el-checkbox>
			
		<br>
		<el-table
      :data="item"
      border
      style="width: 90%; margin: 20px auto;border-radius: 8px; margin: 20px auto;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc ',
          'color': '#ffffff',
          'border': 'none !important'
        }"
		:span-method="(value) => rowSpanRulesHandler(value, item)">
      <el-table-column prop="empName" label="被考核人"/>
      <el-table-column prop="type" label="考核条目类型"/>
	  <el-table-column prop="target" label="考核条目" />
      
      <el-table-column prop="scorePercent" label="考核条目占比/%">
		  <template #default="scope">
		  				{{scope.row.scorePercent}}%
		  		</template>
		</el-table-column>
      <el-table-column prop="assessorName" label="评分人"/>
      <el-table-column prop="assessorPercent" label="评分人占比/%">
		  <template #default="scope">
		    				{{scope.row.assessorPercent}}%
		    		</template>
		  </el-table-column>
	  <el-table-column prop="score" label="评分"/>
	  <el-table-column prop="grade" label="得分">
	  </el-table-column>
	  
	  <el-table-column prop="remark" label="评分说明"/>
	  
    </el-table>
		<div style="text-align: right;margin-right: 200px;margin-bottom: 20px;"> 总计：{{totalList[index]}}分</div>
	</div>
</template>

<script setup>
	
import {ref, onBeforeMount, reactive,getCurrentInstance,watch} from "vue";

let props = defineProps({
  scoreList: {
    type: Array,
    required: true, //是否规定必须得有
  },
  empList1: {
    type: Array,
    required: true, //是否规定必须得有
  },
  update1: {
    type: Function,
    required: true, //是否规定必须得有
  },
  flag:{
    type: Number,
    required: false, //是否规定必须得有
  },
})
watch(props, (newValue, oldValue) => {
	
  tableData.value = newValue.scoreList
  if(newValue.flag == 1){
	  scoreFlag = true
  }else{
	  scoreFlag = false
  }
},{ deep: true });  

const Form = reactive([])
const tableData = ref(props.scoreList)

var scoreFlag = true




var flag = 1
const tableDataCopy = []
var data = [];

for(let i = 0 ; i<tableData.value.length;i++){
	
	data.push(props.scoreList[i])
	
	if(i+1<tableData.value.length && props.scoreList[i].empName != props.scoreList[i+1].empName){
		tableDataCopy.push(data)
		data = []
		flag++;
	}
	
}

tableDataCopy.push(data)

var total = 0
var totalList = [];
for(let i=0 ; i < tableDataCopy.length ; i++ ){
	
	for(let y = 0 ; y<tableDataCopy[i].length;y++){
		tableDataCopy[i][y].grade  = Math.round((Number(tableDataCopy[i][y].score)* Number(tableDataCopy[i][y].scorePercent) * Number(tableDataCopy[i][y].assessorPercent)/10000)* 100) / 100;
				
		total += parseFloat(tableDataCopy[i][y].grade)
	}
	totalList[i] = total.toFixed(2)
	total = 0
}



var empList = []

const addEmpId = (empId,x) =>{
	if(x){
		empList.push(empId)
	}else{
		empList.pop(empId)
	}
	props.update1(empList,"empList1")
}


const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
    let start = index;
  
    while (start < tableData.length) {
    	
    		
    	if(start > index &&compareAttr==="scorePercent"&&row["target"] !== tableData[start]["target"]){
    		break
    	}else{
    		// 进入循环，检查下一个元素
    		if (start > index && row[compareAttr] !== tableData[start][compareAttr]) {
    			break;  // 如果不相等，则停止合并
    		}
    		count++;  // 计数相同的行
    		start++;  // 移动到下一行
    	}
    	
      
    }
  
    // 将合并的行数存储在行数据中
    if (start > index) {
      tableData[index][`${compareAttr}_count`] = count;
    }
  
    // 检查前一行的合并数量与当前行是否相等
    const previousRowCount = index > 0 ? tableData[index - 1][`${compareAttr}_count`] : 0;
    return previousRowCount === count + 1 ? [0, 0] : [count, 1];
};

const columns = [
  "empName",
  "type",
  "target",
  "scorePercent",
  "assessorName",
  "assessorPercent",
  "score",
  "grade",
  "remark"
];
const rowSpanRulesHandler = ({  row, column, rowIndex, columnIndex }, data) => {
  //console.log(columns[columnIndex]);
 // 根据列名判断进行合并
   if (columns[columnIndex] === "type") {
     return compareSingleAttrReturnColSpan(row, "type", rowIndex, data);
   } else if (columns[columnIndex] === "target") {
     return compareSingleAttrReturnColSpan(row, "target", rowIndex, data);
   } else if (columns[columnIndex] === "scorePercent") {
     return compareSingleAttrReturnColSpan(row, "scorePercent", rowIndex, data);
   }else if (columns[columnIndex] === "empName") {
     return compareSingleAttrReturnColSpan(row, "empName", rowIndex, data);
   }
};

</script>
<style lang="scss" scoped>
.el-button:active{
  color:rgb(142, 222, 233)
}
.el-button:focus{
  color:rgb(142, 222, 233)
}
</style>
